<template>
	<view class="container rent-service">
		<view class="service-top">
			<image class="s-t-img" :src="$fileUrl+'service.png'" mode="widthFix"></image>
			<view class="s-t-right">
				<view class="s-t-title">开心农场种植基地</view>
				<view class="s-t-tips">全托管</view>
			</view>
		</view>
		<view class="service-main">
			<view class="select-title">服务特点</view>
			<view class="service-box">
				<view class="service-list " :class="selectType===idx&&'service-list-active'"
					v-for="(item,idx) in serviceList" @click="selectType=idx">
					<view class="service-title">{{item.title}}</view>
					<view class="service-price">
						<text class="service-price-unit">￥</text>
						<text>{{item.price}}/天</text>
					</view>
					<view class="service-info">{{item.tips}}</view>
				</view>
			</view>
			<view class="service-type">
				<view class="type-box-title">服务类型</view>
				<view class="type-list" v-for="item in serviceList[selectType].typeList">
					<image class="type-img" :src="$fileUrl+item.img" mode="widthFix"></image>
					<view class="type-title">{{item.title}}</view>
					<view class="type-tips">{{item.tips}}</view>
				</view>
				<view class="type-null" v-if="serviceList[selectType].typeList.length===0">暂无服务</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	const isLoading = ref(false)
	const selectType = ref(0)
	const serviceList = reactive([
		{
			title: '全托管', price: '0.01', tips: '你啥都不用管， 俺全包了',
			typeList: [
				{ title: '种子代播', tips: '成活率高', img: '播种.png' },
				{ title: '锄草', tips: '长得快', img: '锄草.png' },
			],
		},
		{
			title: '半托管', price: '0.02', tips: '管一半',
			typeList: [
				{ title: '种子代播', tips: '成活率高', img: '播种.png' },
			],
		},
		{ title: '无托管', price: '0.03', tips: '只租地，啥不管',typeList: [] }
	])
	onMounted(async () => { })
</script>

<style lang="scss">
	.rent-service {
		.service-top {
			background-color: #17CC77;
			height: 220rpx;
			display: flex;
			align-items: center;
			padding: 0 50rpx;
		}

		.s-t-img {
			width: 130rpx;
			height: 130rpx;
			margin-right: 15rpx;
		}

		.s-t-right {
			color: #fff;
		}

		.s-t-title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.s-t-tips {
			font-size: 30rpx;
			margin-top: 10rpx;
		}

		.service-main {
			margin: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
		}

		.service-box {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}

		.select-title {
			font-size: 34rpx;
			color: #232323;
			font-weight: bold;
			text-align: center;
			border-bottom: solid 1px #C8C8C8;
			padding-bottom: 20rpx;
		}

		.service-list {
			width: 32%;
			text-align: center;
			background-color: #F9F9F9;
			border-radius: 8rpx;
			padding: 20rpx 0;
			border: solid 2px #F9F9F9;
		}

		.service-list-active {
			border: solid 2px #17CC77;
		}

		.service-title {
			font-size: 26rpx;
			color: #232323;
		}

		.service-price {
			font-size: 30rpx;
			color: #FF5F56;
			font-weight: bold;
			margin-top: 10rpx;
		}

		.service-price-unit {
			font-size: 24rpx;
			font-weight: lighter;
		}

		.service-info {
			font-size: 26rpx;
			color: #8F8F8F;
			margin-top: 20rpx;
		}

		.service-type{
			background-color: #F9F9F9;
			margin-top: 48rpx;
			border-radius: 10rpx;
			padding:20rpx 30rpx;
		}
		.type-box-title{
			font-size: 34rpx;
			color: #232323;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.type-list{
			background-color: #fff;
			display: inline-block;
			width: 206rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			text-align: center;
			padding-bottom: 20rpx;
		}
		.type-img{
			width: 206rpx;
			height: 168rpx;
		}
		.type-title{
			font-size: 26rpx;
			color: #232323;
		}
		.type-tips{
			font-size: 26rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}
		.type-null{
			font-size: 26rpx;
			color: #8F8F8F;
			height: 282rpx;
			text-align: center;
		}
	}
</style>